<template>
	<view>
		<view style="height: 126rpx; fr-c" class="w-1 fr-c bg-ff">
			<view class="sbox fr-s-c p-r-30" @click="$u.route('/pages/index/Search/Search')">
				<image style="width: 32rpx; height: 32rpx;" :src="$path + '/tab3/search.png'" mode=""></image>
				<text style="color: #BFC0C4;" class="fs-28 m-l-10">搜索</text>
			</view>
		</view>
		<view class="w-1 fr-s-s m-t-20 o-h" style="height: calc(100vh - 126rpx - 40px - 40rpx);">
			<scroll-view scroll-y="true" class="bg-ff h-1"
				style="width: 216rpx;  border-radius: 0 20rpx 0 0; overflow: hidden;">
				<view class="fr-c" @click="changeLeft(index,item)" :class="curd==index?'lboxact':'lbox'"
					v-for="(item,index) in list" :key="index">
					{{item.name}}
					<view class="acbar" v-if="curd==index"></view>
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="flex-1 h-1 m-l-20 bg-ff"
				style="border-radius: 20rpx 0 0 0; padding: 25rpx; width: 482rpx; ">
				<view class="w-1 warp fr-s-s">
					<view class="fl-s-c m-b-20" @click="$u.route('/pages/index/Detail?id='+item.id)" style="width: 50%;"
						v-for="(item,index) in rlist" :key="index">
						<image style="width: 84rpx; height: 84rpx; border-radius: 12rpx;" :src="$dimg(item.image)"
							mode="aspectFill"></image>
						<text class="c-00 fs-28 bold m-t-5 t-c">{{item.title}}</text>
					</view>
				</view>
				<view class="w-1 p-t-150" v-if="nodata">
					<up-empty :icon="$icon"></up-empty>
				</view>
			</scroll-view>
		</view>

		<up-tabbar :value="1" @change="changeTabindex" activeColor="#01796D" inactiveColor="#A4A4A4">
			<up-tabbar-item text="首页">
				<template #active-icon>
					<image style="width: 52rpx; height: 52rpx;" :src="`/static/images/tabbar/${nowid!=1?'t':''}1s.png`">
					</image>
				</template>
				<template #inactive-icon>
					<image style="width: 52rpx; height: 52rpx;" :src="`/static/images/tabbar/${nowid!=1?'t':''}1.png`">
					</image>
				</template>
			</up-tabbar-item>
			<up-tabbar-item :text="nowid==1?'服务':'接单大厅'">
				<template #active-icon>
					<image style="width: 52rpx; height: 52rpx;"
						:src="nowid==1?'/static/images/tabbar/2s.png':'/static/images/tabbar/t3s.png'"></image>
				</template>
				<template #inactive-icon>
					<image style="width: 52rpx; height: 52rpx;"
						:src="nowid==1?'/static/images/tabbar/2.png':'/static/images/tabbar/t3.png'"></image>
				</template>
			</up-tabbar-item>
			<!-- 			<up-tabbar-item v-if="nowid==1" text="订单">
				<template #active-icon>
					<image style="width: 52rpx; height: 52rpx;" :src="`/static/images/tabbar/${nowid!=1?'t':''}3s.png`">
					</image>
				</template>
				<template #inactive-icon>
					<image style="width: 52rpx; height: 52rpx;" :src="`/static/images/tabbar/${nowid!=1?'t':''}3.png`">
					</image>
				</template>
			</up-tabbar-item> -->
			<up-tabbar-item text="我的">
				<template #active-icon>
					<image style="width: 52rpx; height: 52rpx;" :src="`/static/images/tabbar/${nowid!=1?'t':''}4s.png`">
					</image>
				</template>
				<template #inactive-icon>
					<image style="width: 52rpx; height: 52rpx;" :src="`/static/images/tabbar/${nowid!=1?'t':''}4.png`">
					</image>
				</template>
			</up-tabbar-item>
		</up-tabbar>



	</view>
</template>

<script setup>
	import {
		storeToRefs
	} from 'pinia';
	import useUserStore from '@/stores/user.js';

	const {
		nowid
	} = storeToRefs(useUserStore())

	uni.hideTabBar()
	const tindex = ref(1)
	const changeTabindex = val => {
		console.log(val)
		let arr = nowid.value == 1 ? ['/pages/index/index', '/pages/Classify/Classify',
			'/pages/User/User'
		] : ['/pages/index/index', '/pages/User/User'];
		uni.switchTab({
			url: arr[val]
		})
	}

	onShareAppMessage(() => {})
	const list = ref([])
	const curd = ref(1)
	onLoad(async () => {
		await getlist()
		getright()
	})
	async function getlist() {
		await uni.$post({
			url: '/api/goods/shortcutcatelst',
		}).then(res => {
			list.value = res.data;
		})
	}

	const page = ref(1)
	const rlist = ref([])
	const nodata = ref(false);
	const loadmore = ref(true);
	// 右侧列表
	function getright() {
		uni.$post({
			url: '/api/goods/swgoodslst',
			data: {
				type: list.value[curd.value].id,
				page: page.value,
			}
		}).then(res => {
			if (page.value == 1) rlist.value = [];
			rlist.value = [...rlist.value, ...res.data];
			nodata.value = !rlist.value.length;
			loadmore.value = res.data.length;
		}).catch(err => {
			rlist.value = [];
			nodata.value = !rlist.value.length;
			loadmore.value = true;
		})
	}

	function changeLeft(index, item) {
		console.log(item)
		if (item.id == -1) {
			// uni.$u.route('/pages/WebVIew/WebVIew?url=' + encodeURIComponent(item.url))
			uni.$u.route('/pages/to/to')
		} else {
			curd.value = index
			rlist.value = []
			getright()
		}

	}
</script>

<style>
	page {
		background: #f1f5f6;
	}

	.sbox {
		width: 686rpx;
		height: 80rpx;
		background: #f3f3f3;
		border-radius: 38rpx 38rpx 38rpx 38rpx;
	}

	.lboxact {
		position: relative;
		width: 216rpx;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #01796D;
	}

	.lbox {
		position: relative;
		width: 216rpx;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #101012;
	}

	.acbar {
		width: 8rpx;
		height: 40rpx;
		background: #01796D;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		position: absolute;
		left: 0;
		top: 26rpx;
	}
</style>